$img_path: '../../res/img/progress/';
@import './fundStatus';
@import '../helper/utils';
html, body {
  margin: 0;
  padding: 0;
}


.return_progress_img {
  $origin_width: 92px;
  $origin_height: 83px;
  background: url($img_path + 'return.png') no-repeat;
  background-size: $origin_width/3;
  width:$origin_width/3;
  height:$origin_height/3;
}


.stickTop {
  @at-root {
    .banner_stickTop_img {
      $origin_width: 640px;
      $origin_height: 320px;
      background: url($img_path + 'banner.png') no-repeat;
      background-size: $origin_width/2;
      width: $origin_width/2;
      height: $origin_height/2;
      margin: 0 auto;
    }

    .fund_stickTop_container {
      margin-top: -1px;
      -webkit-column-count: 2;
      -webkit-column-gap: 0px;
      -webkit-column-fill: auto;
      @at-root {
        $nor_line:16px;
        $dou_line:$nor_line*2 +2;
        .columns {
          -webkit-column-break-inside: avoid;
          column-break-inside: avoid;
          text-align: center;
          padding: 10px 30px;
          background-color: #1b9ca8;
          &:first-child {
            border-right: 1px solid #10666e;
          }
        }

        .done_container_fund, .predict_container_fund {
          color: white;
          display: inline-block;
          font-family: SimSun;
        }

        .suffix_done_helper, .suffix_predict_helper {
          color: #ffffff;

        }

       /* .suffix_done_helper{
          line-height:$nor_line;
          @media screen and (min-width:350px) {
            line-height:initial;
          }
        }


        .suffix_predict_helper{
          line-height:$dou_line;
          @media screen and (min-width:350px) {
            line-height:initial;
          }
        }*/
      }
    }

  }
}

@at-root {
  $collections_width: 84px;
  $collections_height: 30px;
  $collections_path: $img_path + 'collections.png';
  $gap: 10px;
  $o_icon_w: 28px;
  $o_arrow_w: 8px;
  %same_bg {
    padding: 10px 20px;
    background-color: #1b9ca8;
  }

  %same_ml {
    vertical-align: middle;
  }

  %same_img {
    background: url($collections_path) no-repeat;
    background-size: $collections_width;
    display: inline-block;
  }

  %same_before {
    content: "";
    display: block;
    height: 10px;
    width: 100%;
    background-color: #ebebeb;
  }


  .eventDetail {
    $factor: 2;
    @at-root {
      .stick_eventDetail_container {
        @extend %same_bg;

        @at-root {
          .icon_eventDetail_img, .title_eventDetail_text, .arrow_eventDetail_img {
            @extend %same_ml;
          }

          .icon_eventDetail_img {
            @extend %same_img;
            $o_h: 30px;
            width: $o_icon_w;
            height: $o_h;
          }

          .arrow_eventDetail_img {
            @extend %same_img;
            $o_h: 17px;
            background-position: -($o_icon_w +$gap) 0;
            width: $o_arrow_w;
            height: $o_h;
            @include vp(transition, all .2s linear);
            @at-root .eventDetail.show #{&} {
              @include vp(transform, rotateZ(90deg));
            }
          }
        }
      }

      .intro_eventDetail_text {
        overflow: hidden;
        max-height: 0;
        font-family: SimSun;
        font-size: 16px;
        color: #323232;
        padding: 10px 15px;
        background-color:#ebebeb;
        @include vp(transition, all .5s linear);
        @at-root .eventDetail.show #{&} {
          max-height: 100px;
        }
      }
    }
  }

  .loveFront {
/*    &::before {
      @extend %same_before;
    }*/
    @at-root {
      .stick_loveFront_container {
        @extend %same_bg;
        @at-root {
          .icon_loveFront_img {
       /*     @extend %same_ml;
            @extend %same_img;
            $o_heart_w: 28px;
            $o_heart_h: 27px;
            background-position: -($o_icon_w+$o_arrow_w+2*$gap) 0;
            width: $o_heart_w;
            height: $o_heart_h;*/
            $o_heart_w: 28px;
            $o_heart_h: 27px;
            $factor:.7;
            background:url($img_path + 'heart-icon.png') no-repeat;
            background-size:$o_heart_w*$factor;
            width: $o_heart_w*$factor +1;
            height: $o_heart_h*$factor;
            display: inline-block;
          vertical-align: middle;
          }

          .title_loveFront_text{
            color:#ffffff;
            vertical-align: middle;
          }
        }
      }
    }
  }
}

.congrats.show{
  position:absolute;
  width:100%;
  height:100%;
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, .8);
  .reach_congrats_img{
    $o_w:464px;
    $o_h:292px;
    background:url($img_path + 'success.png');
    background-size:$o_w/2;
    width:$o_w/2;
    height:$o_h/2;
    margin:200px auto 50px auto;

  }
  .btn_congrats_img{
    $o_w:200px;
    $o_h:70px;
    background:url($img_path + 'btn.png');
    background-size:$o_w/2;
    width:$o_w/2;
    height:$o_h/2;
    margin:0 auto;
  }
}